<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 结算单管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> 详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-detail ref="form" v-model="form" :option="option">
            <template slot-scope="scope" slot="photoListForm">
                <el-image
                        style="width: 100px; height: 100px"
                        v-for="url in photoList"
                        :key="url" :src="url"
                ></el-image>
            </template>
        </avue-detail>
        <div>
            <el-button type="primary" @click="goBack">返 回</el-button>
        </div>
    </basic-container>
</template>

<script>
    import {fetchInfo} from '../../api/bill/settlement';
    import {formOption} from '../../const/crud/bill/form_option/settlement';
    import {goBack} from "../../util/util";

    export default {
        data() {
            return {
                form: {},
                option: formOption,
                photoList: []
            }
        },
        computed: {},
        created() {
        },
        beforeRouteEnter(to, from, next) {
            next(vm => vm.queryData(vm.$route.query.res.settlementSn));
        },
        methods: {
            queryData(settlementSn){
                fetchInfo({settlementSn: settlementSn}).then(response => {
                    let photoList = [];
                    response.data.data.photoList.forEach(item => {
                        photoList.push(item.picUrl);
                    });
                    this.form = response.data.data;
                    this.photoList = photoList
                }).catch(() => {
                    this.goBack();
                });
            },
            goBack(time = 1000) {
                goBack(this, time);
            }
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }
</style>


